<template>
	<view>
		<view :class="['navbar',isScroll === true ? 'nav-fixed':'nav-normal']"
			:style="{ 'height': navheight +parseInt(slotheight)+ 'px' ,'background-color' : bgcolor}">
			<view :style="{ 'height': navheight + 'px' ,'background-color' : bgcolor}">
				<view :style="{'height': statusBarHeight +'px'}"></view>
				<view class="header" @click="getTool" :style="{'height': menuHeight +'px'}">

					<view class="hearder-status">
						<view class="nav-btn" :style="{'width':btnWidth + 'px','height': btnHeight + 'px', 'color': toolcolor}">
							<view style="width: 50rpx;font-weight: 500;height: 50rpx;position: relative;" >
								<text class="iconfont icon-xiangzuo" style="font-size: 40rpx;color: #000;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></text>
							</view>
						</view>
					</view>
					<view class="hai" :style="{'line-height': menuHeight +'px'}">
						群二维码
					</view>
				</view>
			</view>

		</view>
		<image :src="background" style="width: 100%;height: 100vh;" mode=""></image>
		<view :style="{'top': (navheight+30)+'px'}" class="shang_city">
			<view style="width: 100%;margin-top: 100rpx;">
				<image :src="poster" style="width: 620rpx;display: block;margin: 0 auto;" mode="widthFix"></image>
				<view @click="baocun" style="width: 380rpx;height: 90rpx;line-height: 90rpx;text-align: center;font-size: 28rpx;color: #FFFFFF;background-color: #1FB0AC;border-radius: 46rpx;margin: 100rpx auto 0;">
					保存到相册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollTop: 0,
				navheight: 0,
				statusBarHeight: 0,
				menuHeight: 0,
				haveBack: false,
				btnHeight: 30,
				btnWidth: 70,
				isScroll: true,
				slotheight: '0',
				xiao: true,
				group_id:'',
				background:'',
				poster:'',
			}
		},
		onLoad(option) {
			this.group_id=option.id
			this.erweima()
		},
		methods:{
			getTool:function(){
				uni.navigateBack({
					delta:1
				})
			},
			getSysHeightInfo() {
				const that = this
				let statusBarHeight, menuButtonObject, menuHeight, navheight, haveBack, btnHeight, btnWidth

				statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				//#ifdef MP-WEIXIN
				menuButtonObject = uni.getMenuButtonBoundingClientRect()
				menuHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
				navheight = menuHeight + statusBarHeight
				btnHeight = menuButtonObject.height
				btnWidth = menuButtonObject.width
				//#endif
				//#ifdef H5
				menuHeight = 44
				navheight = menuHeight + statusBarHeight
				btnHeight = 30
				btnWidth = 70
				//#endif
				if (getCurrentPages().length === 1) { // 当只有一个页面时
					haveBack = false;
				} else {
					haveBack = true;
				}
				that.navheight = navheight
				that.statusBarHeight = statusBarHeight
				that.menuHeight = menuHeight
				that.haveBack = haveBack
			},
			erweima:function(){
				this.post('api/im/im/im_group',{group_id:this.group_id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.background=res.data.background
						this.poster=res.data.poster
					}
				})
			},
			baocun() {
						let that = this;
						// 向用户发起授权请求
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success: () => {
			                    // 已授权
								that.downLoadImg();
							},
							fail: () => {
			                    // 拒绝授权，获取当前设置
								uni.getSetting({
									success: (result) => {
										if (!result.authSetting['scope.writePhotosAlbum']) {
											that.isAuth()
										}
									}
								});
							}
						})
					},
			        /**
			         * 下载资源，保存图片到系统相册
			         */
			        downLoadImg() {
						let that=this
						uni.showLoading({
							title: ''
						});
						uni.downloadFile({
							url: that.poster,
							success: (res) => {
								uni.hideLoading();
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: "保存成功",
												icon: "none"
											});
										},
										fail: function() {
											uni.showToast({
												title: "保存失败，请稍后重试",
												icon: "none"
											});
										}
									});
								}
							},
							fail: (err) => {
								uni.showToast({
									title: "失败啦",
									icon: "none"
								});
							}
						})
					},
			        /*
			         * 引导用户开启权限
			         */
					isAuth() {
						uni.showModal({
							content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (result) => {
											console.log(result.authSetting);
										}
									});
								}
							}
						});
					},
		},
		mounted() {
			const that = this
			this.getSysHeightInfo()
			//#ifdef H5
			window.onscroll = function() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 30) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
			}
			//#endif

		},
		onPageScroll(t) {

			t.scrollTop > 20 ? this.xiao = false : this.xiao = true;
			// t.scrollTop > 80 ? this.da = true : this.da = false;

		},
		watch: {
			scrollTop(newValue, oldValue) {
				//#ifdef MP-WEIXIN
				const that = this
				if (newValue > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
				//#endif
			}
		},
	}
</script>

<style lang="scss">
	page {
		font-family: Demibold;
		height: 100vh;
	}
	.shang_city {
		width: 92%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding-bottom:40rpx;
	}
	.hai {
		text-align: center;
		font-size: 30rpx;
		color: #000;
	}
	// 头部
	.navbar {
		width: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		z-index: 999;
		flex-shrink: 0;
		color: #fff;
		font-size: 16px;
	}

	.nav-normal {
		position: relative;
	}

	.nav-fixed {
		position: fixed;
	}

	.header {
		position: fixed;
		width: 100%;
	}

	.logo-centent {
		display: flex;
		align-items: center;
	}

	.logo-centent image {
		width: 260rpx;
		height: 68rpx;
		margin-left: 20rpx;
	}

	.hearder-status {
		display: flex;
		align-items: center;
		position: absolute;
		padding-left: 30rpx;
		height: 100%;
		z-index: 99999;

	}

	.header-title {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: center;
	}

	.header-title image {
		position: absolute;
		width: 270rpx;
		height: 35rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.header-title-left {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: left;
	}

	.back-text {
		margin-left: 7px;
		width: 100upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.hearder-status .nav-title-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 100%;
		font-weight: bold;
	}

	.hearder-status .nav-btn {
		/* background-color: rgba(255, 255, 255, .5);
		border-radius: 15px; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 50%;
		font-weight: bold;
	}

	.hearder-status .nav-btn .gotback,
	.hearder-status .nav-btn .gothome {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}

	.Addslot {
		position: absolute;
		width: 100%;
	}
</style>